﻿

@{
    ViewBag.Title = "Login";
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <template>
            <el-row>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8" :offset="8">
                    <div class="grid-content bg-purple-light">
                        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="用户名" prop="name">
                                <el-input v-model="ruleForm.username"></el-input>
                            </el-form-item>
                            <el-form-item label="输入密码" prop="name">
                                <el-input v-model="ruleForm.password" type="password"></el-input>
                            </el-form-item>
                            <el-form-item label="用户身份" prop="region">
                                <el-select v-model="ruleForm.region" placeholder="请选择用户身份">
                                    <el-option label="员工" value="员工"></el-option>
                                    <el-option label="管理员" value="管理员"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-on:click="submitForm">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
        </template>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var logapp = new Vue({
            el:'#app',
            data:{
                ruleForm: {
                    username: "",
                    password:"",
                    region: ""
                }
            },
            methods: {
                submitForm() {
                    axios.post("/test/logon", { username: logapp.ruleForm.username, password: logapp.ruleForm.password, admin: logapp.ruleForm.region })
                        .then(function (response) {
                            if ("error" == response.data)
                                alert("账号或密码有误");
                            else {
                                localStorage.setItem('username', logapp.ruleForm.username);
                                localStorage.setItem('password', logapp.ruleForm.password);
                                localStorage.setItem('region', logapp.ruleForm.region);
                                window.location.href = "/Test/index";
                            }
                        });
                }
            }
        })
    </script>
</body>
</html>